import React, { useEffect } from "react";
import axios from "axios";
import instance from "../utils/request";
import http from "../utils/http";

export default function AxiosCom() {
  //定义一个接口
  interface Duanzi {
    id: number;
    name: string;
    text: string;
  }

  //定义一个新的类型
  type Duanzis = Duanzi[];

  //定义一个接口
  interface Book {
    id: number;
    title: string;
    price: number;
    author: string;
  }

  //发送请求获取段子的信息
  useEffect(() => {
    //声明一个函数
    let getData = async () => {
      //发送请求获取返回 promise 成功的结果值
      let result = await axios.get<Duanzis>("http://api.xiaohigh.com/duanzi");
      console.log(
        result.data.map((item) => {
          console.log(item.name);
          return item;
        })
      );
    };
    // getData();
  }, []);

  //useEffect 演示封装的 axios 的使用
  useEffect(() => {
    // instance.get<any, Duanzis>('http://api.xiaohigh.com/duanzi')
    // .then(response => {
    //   console.log(response.forEach(item => {
    //     console.log(item.name);
    //   }));
    // })
  }, []);

  //useEffect 演示封装的 axios 的使用
  useEffect(() => {
    http.get<any, Book[]>("http://localhost:8080/api/book").then((response) => {
      console.log(response.forEach(item => {console.log(item.author)}));
    });
  }, []);

  return <div>02_AxiosCom</div>;
}
